<template>
  <div class="login">
    <div class="loginInfo">
      <p>
        <span></span>
        <input v-model="loginData.phone" type="text" placeholder="请输入用户名/手机号" />
      </p>
      <p>
        <span></span>
        <input v-model="loginData.password" type="password" placeholder="请输入密码" />
      </p>
      <p>
        <span>忘记密码?</span>
      </p>
      <p class="bt">
        <span @click="userLogin">登录</span>
        <span @click="register">注册</span>
      </p>
      <p>
        <img src="../assets/other.png" />
      </p>
      <p class="ajc">
        <img @click="wxlogin" src="../assets/wx.png" />
      </p>
    </div>
  </div>
</template>

<script>
  import { Indicator } from 'mint-ui';
  export default {
    data() {
      return {
        loginData: {
          phone: null,
          password: null
        }
      };
    },
    created() {
      this.$parent.showTabbar = false;
      if (localStorage.getItem('token') && localStorage.getItem('uid')) {
        this.$router.push('/index')
      }
    },
    methods: {
      wxlogin(){
        Indicator.open({
          spinnerType: 'fading-circle'
        });
        plus.oauth.getServices((services)=>{
          let auths = services;
          let s = auths[0];
          if ( !s.authResult ) {
            s.login((e)=>{
              s.getUserInfo(()=>{
                localStorage.setItem("user",JSON.stringify(s.userInfo));
                this.test()
                Indicator.close()
              },function(e){
                plus.nativeUI.alert("获取用户信息失败！",null,"登录");
                Indicator.close()
              });
              Indicator.close()
            }, function(e){
              alert( "登录认证失败！" );
              Indicator.close()
            } );
          }else{
            s.getUserInfo(()=>{
              localStorage.setItem("user",JSON.stringify(s.userInfo));
              // location.reload();
              this.test()
              Indicator.close()
            },function(e){
              plus.nativeUI.alert("获取用户信息失败！",null,"登录");
              Indicator.close()
            });
          }

        }, function(e){
          alert( "获取服务列表失败："+e.message+" - "+e.code );
          Indicator.close()
        } );

      },
      userLogin() {
        this.$axios({
          method: 'post',
          url: 'user/login?phone=' + this.loginData.phone + '&password=' + this.loginData.password
        }).then(res => {
          if (res.data.code === 200) {
            localStorage.setItem('token', res.data.data.data.api_token)
            localStorage.setItem('uid', res.data.data.data.id)
            this.$router.push('/index')
          } else {
            this.$toast(res.data.data.msg)
          }
        })
      },
      register() {
        this.$router.push("register");
      }
    }
  };
</script>

<style lang='less'>
  .login {
    background: url("../assets/loginbg.png");
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    position: fixed;
  }
  .loginInfo {
    width: 75%;
    margin: 0 auto;
    margin-top: 18rem;
    p:nth-child(1),
    p:nth-child(2) {
      border-radius: 21px;
      opacity: 0.8;
      background-color: #ffffff;
      margin-bottom: 15px;
      padding: 12px 10px;
      span {
        font-size: 15px;
        color: #fe4a70;
      }
    }
    input {
      border: 0;
      outline: 0;
      padding-left: 5px;
    }
    p:nth-child(3) {
      display: flex;
      justify-content: flex-end;
      span {
        margin-right: 10px;
        color: #ffffff;
        padding-bottom: 5px;
        border-bottom: 1px solid #fff;
      }
    }
    p:nth-child(4) {
      padding: 28px 0 35px 0; // 55
      span {
        color: #fff;
        font-size: 15px;
        background: linear-gradient(90deg, #fea45f 0%, #fd8755 100%);
        box-shadow: 0px 2px 4px 0px rgba(40, 3, 3, 0.1);
        border-radius: 17px;
        padding: 10px 40px;
      }
    }
    p:nth-child(5) {
      width: 100%;
      img {
        width: 100%;
      }
    }
    p:last-child {
      /*padding-top: 25px;*/
      img {
        height: 2.8rem;
      }
    }
  }
</style>